<template>
  <div class="box">
    <el-container class="home-container">
      <!-- 侧边栏 -->
      <el-aside width="13%" class="tabBox">
        <!-- 侧边栏菜单 -->
        <div class="logo">
          <!-- <img
            src="https://img2.baidu.com/it/u=861046413,2930569991&fm=253&fmt=auto&app=138&f=JPEG?w=614&h=500"
            alt=""
          /> -->
          <img src=".././assets/logo.png" alt="" />
        </div>
        <el-menu
          text-color="#000"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          :default-active="activePath"
          @open="menuOpen"
          unique-opened
        >
          <el-submenu
            :index="item.role_id + ''"
            v-for="(item, index) in menulist"
            :key="item.role_id"
          >
            <!-- 一级菜单 -->
            <template slot="title">
              <!-- 图标 -->
              <!-- <i :class="item.icon"></i> -->
              <!-- 一级菜单 -->
              <span
                @click="titleChange(index)"
                :class="['titleStyle', index == conun ? 'Selected' : '']"
                >{{ item.role_name }}</span
              >
            </template>
            <el-menu-item
              :index="subItem.role_id + ''"
              v-for="(subItem, index1) in item.secondary"
              :key="subItem.role_id"
              @click="saveNavState(subItem.role_url, subItem.role_name)"
              v-show="subItem.role_id !== 15"
            >
              <template slot="title">
                <!-- 图标 -->
                <!-- <i :class="subItem.icon"></i> -->
                <!-- 二级菜单 -->
                <span
                  @click="menuChange(subItem.role_id)"
                  :class="[
                    'menuSpan',
                    subItem.role_id == spanconun ? 'spanstyle' : '',
                  ]"
                  >{{ subItem.role_name }}</span
                >
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="width: 100%">
          <div
            style="
              width: 100%;
              height: 60px;
              margin: 0;
              padding: 0;
              position: relative;
            "
          >
            <div style="float: left; margin-left: 60px; color: #eb5f08">
              <span v-for="(item1, index) of pathList" :key="index">
                {{ item1.name }} <i class="el-icon-close elicon"></i>
              </span>
            </div>
            <div
              style="
                color: #fff;
                position: absolute;
                top: 0;
                right: 50px;
                height: 60px;
              "
            >
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  {{ nametext || "小爱"
                  }}<i class="el-icon-caret-bottom caret"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <div @click="logout" class="click">
                      退出
                    </div></el-dropdown-item
                  >
                  <el-dropdown-item
                    ><div @click="ChangePassword">
                      修改密码
                    </div></el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getrolelist } from "@/request/index";
export default {
  data() {
    return {
      nametext: "小爱",
      pathList: [],
      spanconun: 100,
      conun: 0,
      isShow: false,
      menulist: [],
      //侧边栏是否激活
      isCollapse: false,
      //被激活的链接地址
      activePath: "",
      // defaultList: "1-1",
    };
  },
  created() {
    this.nametext = window.sessionStorage.getItem("name");
    function Arrtip(array) {
      var _arr = [],
        isNodemon;

      for (var i = 0; i < array.length; i++) {
        isNodemon = false;
        for (var j = 0; j < _arr.length; j++) {
          if (_arr[j] == array[i]) {
            isNodemon = true;
            break;
          }
        }
        if (!isNodemon) {
          _arr.push(array[i]);
        }
      }
      return _arr;
    }
    this.menulist = JSON.parse(window.sessionStorage.getItem("role"));
    // console.log(this.menulist);
    this.activePath = window.sessionStorage.getItem("activePath");
    window.sessionStorage.setItem(
      "menulist",
      JSON.stringify(this.menulist)
    );
    this.mygetrolelist();
    this.pathList = Arrtip(this.$vuex.state.bookList);
  },
  methods: {
    menuOpen(index) {
      this.activePath = index;
      // this.conun = index
      // console.log(index);
    },
    menuChange(index) {
      this.spanconun = index;
    },
    titleChange(index) {
      this.conun = index;
    },
    saveNavState(path) {
      this.$router.push({
        path: path,
        query: {
          name,
          path,
        },
      });
    },
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    ChangePassword() {
      this.$router.push("/ForgotPassword");
    },
    mygetrolelist() {
      getrolelist().then((res) => {
        // console.log(res, 999999999);
        if (res.code != "0000") return this.$message.error(res.msg);
        // this.menulist = res.data;
        // console.log(res.data);
      });
    },
  },
};
</script>
<style></style>
<style lang="scss" scoped>
.caret {
  color: #e04e2e;
}
.elicon {
  font-size: 12px;
  font-weight: 700;
}
.el-dropdown-link {
  cursor: pointer;
  // color: #c2c2c2;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.menuSpan {
  display: block;
  width: 100%;
  height: 50px;
}
.spanstyle {
  display: block;
  width: 200px;
  // height: 50px;
  // background-color: #f4f4f3;
  // border-radius: 10px;
  // color: #000 !important;
  color: #fff !important;
   
  box-shadow: 2px 10px 13px 4px #eee !important;
  border-radius: 10px;
  background: linear-gradient(
    to right,
    #e04e2e,
    #eb5e09
  ); /* Safari 5.1 - 6.0 */
}
::v-deep .el-main {
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;

  box-sizing: border-box;
  background-color: #fdfcfb !important;
}
::v-deep .el-aside {
  overflow: visible;
  box-sizing: border-box;
  flex-shrink: 0;
}

.Selected {
  // position: absolute;
  // color: #fff !important;
  // top: 0;
  // left: 17px;
  // box-shadow: 2px 10px 13px 4px #eee !important;
  // border-radius: 10px;
  // background: linear-gradient(
  //   to right,
  //   #e04e2e,
  //   #eb5e09
  // ); /* Safari 5.1 - 6.0 */
}
.titleStyle {
  color: #a2a2a2;

  width: 100%;
  height: 50px;
  line-height: 50px;
  display: block;
}
.tabBox {
  text-align: center;
  box-shadow: 10px 10px 88px 10px #eee !important;
  padding-top: 7%;
  position: relative;
  .logo {
    position: absolute;
    margin-top: -22%;
    width: 73%;
    // height: 20%;
    margin-left: 14%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.el-header {
  // background-color: #409eff;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;
  color: #ff0000;
}
.el-header div {
  display: flex;
  align-items: center;
}
.el-header div span {
  margin-left: 15px;
}

.el-aside .el-menu {
  border-right: none;
}
.el-main {
  // margin-left: 50px;
  padding-top: 0;
}
.home-container {
  height: 100%;
  .el-submenu__title {
    position: relative;
    color: #fff !important;
    height: 50px;
  }
}

.iconfont {
  margin-right: 10px;
}
.toggleButton {
  color: #fff;
  font-size: 10px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
::v-deep .el-submenu__icon-arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -7px;
  transition: transform 0.3s;
  font-size: 12px;
  color: #000 !important;
}
</style>
